<template>
    <view class=" teacherList-main">
        <view class="liet-left">
            <view class="list-item" v-for="(item,index) in list1" @tap="go(item)">
                <image :src="item.photo" alt="" mode="widthFix" class="img">
                <span class="name">{{item.name}}</span>
                <span class="type">{{item.title}}</span>
                <p class="content">英语专业学士,英语专业八级。从事少儿英语教育数年，有丰富的教学经验。”</p>
                <!-- <view class="collect">
                    <i class="iconfont iconshoucang1"></i>
                    <span class="number">{{item.followCount}}</span>
                </view> -->
            </view>
        </view>
        <view class="liet-right">
            <view class="list-item" v-for="(item,index) in list2" @tap="go(item)">
                <image :src="item.photo" alt="" mode="widthFix" class="img">
                <span class="name">{{item.name}}</span>
                <span class="type">{{item.title}}</span>
                <p class="content">英语专业学士,英语专业八级。从事少儿英语教育数年，有丰富的教学经验。”</p>
                <!-- <view class="collect">
                    <i class="iconfont iconshoucang1"></i>
                    <span class="number">{{item.followCount}}</span>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>

    export default {
        onLoad() {
            this.getData();
            uni.showLoading({
            });
        },
        components: {
            
        },
        data(){
            return{
               list1:[
                   
               ],
               list2:[
                   
               ],
               pageNo:1,
               pageSize:10
            }
        },
        methods:{
            go(item){
                uni.navigateTo({
                    url: 'teacherContent?id='+item.id,
                });
            },
            select(index){
                var len = this.list.length;
                for(var i=0;i<len;i++){
                    if(i==index){
                        this.list[i].addClass="select"
                    }
                    else{
                        this.list[i].addClass=""
                    }
                }
            },
            getData(){
              var that  = this;
              this.$http.post("/f/pageTeacher?pageNo="+this.pageNo+"&pageSize="+this.pageSize)
              .then(function (response) {
                var data = response.data;
                var len = data.length;
                for(var i=0;i<len;i++){
                  if((i+1)%2==0){
                    that.list2.push(data[i]);
                    console.log(i)
                  }
                  else{
                    that.list1.push(data[i]);
                  }
                }
                that.start = true;
                uni.hideLoading();
                
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
            },
        }
    }
</script>

<style lang="less">
    .teacherList-main{
        background:#f4f4f4;
        width:100%;
        height:100%;
        padding:0 30rpx;
        box-sizing:border-box;
        display:block;
        overflow-y:auto;
        .liet-left{
            width:calc(50% - 15rpx);
            display:flex;
            flex-wrap:wrap;
            float:left;
        }
        .liet-right{
            width:calc(50% - 15rpx);
            display:flex;
            flex-wrap:wrap;
            float:right;
        }
        .list-item{
            width:100%;
            border-radius:10rpx;
            background:#ffffff;
            overflow:hidden;
            margin-top:30rpx;
            position:relative;
            display:flex;
            flex-wrap:wrap;
            .collect{
                position:absolute;
                right:25rpx;
                bottom:25rpx;
                height:35rpx;
                .iconfont{
                    display:block;
                    width:35rpx;
                    height:35rpx;
                    border-radius:50%;
                    border:2px solid #f25b25;
                    color:#f25b25;
                    line-height:33rpx;
                    font-size:24rpx;
                    text-align:center;
                    float:left;
                    margin-right:10rpx;
                    box-sizing:border-box;
                }
                .number{
                    line-height:35rpx;
                    font-size:26rpx;
                    float:left;
                    color:#777777;
                }
            }
            .type{
                line-height:40rpx;
                display:block;
                width:50%;
                margin-top:10rpx;
                padding-left:20rpx;
                font-size:28rpx;
                color:#555555;
                margin-bottom:0rpx;
                box-sizing:border-box;
            }
            .name{
                line-height:40rpx;
                display:block;
                width:50%;
                margin-top:10rpx;
                box-sizing:border-box;
                color:#555555;
                padding-left:20rpx;
                font-size:32rpx;
                
            }
            .content{
                margin-top:10rpx;
                margin-bottom:20rpx;
                line-height:40rpx;
                padding:0 20rpx;
                width:100%;
                box-sizing:border-box;
                font-size:26rpx;
                color:#666666;

            }
            .img{
                width:100%;
                display:block;
            }
        }
        .list-item:last-child{
            margin-bottom:30rpx;
        }
    }
</style>
